<template>
  <div class="containerTable">
    <!--表5蔬菜生产经营实体表T_VegProsecution-->
    <Row class="divSearch">
      <Col span="24" >
        <label class="searchLabel">县&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(市):</label>
        <Select v-model="searchModel.AreaCode"  placeholder="请选择..." style="width: 100px" @on-change="getPageData()">
            <Option :value="userInfo.AreaCode">{{(userInfo.AreaCode=='530000000000')?'全省':'全市（州）'}}</Option>
            <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
        </Select>
     <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange' style="width: 200px;float: left;margin-right: 5px;"></Cascader>-->
      <!--根据需求删除不不要查询条件-->
      填报年度：
      <Select v-model="searchModel.FillInYear" placeholder="请选择..." style="width: 100px" @on-change="getPageData()">
        <Option value="">全部</Option>
        <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
      </Select>
      <!--时间周期：
      <Select v-model="searchModel.TimesType" placeholder="全部" style="width: 100px" @on-change="getPageData()">
          <Option value="">全部</Option>
          <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
      </Select>-->
       报表状态：
            <Select v-model="searchModel.Status" placeholder="全部" :label-in-value="true" @on-change="getPageData()" style="width:200px">
               <Option value="">全部</Option>
                <Option v-for="item in statusList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
            </Select>
      <Button icon="ios-search" type="ghost" @click="getPageData()">查询</Button>
      </Col>
    </Row>
    <Row>
      <Col span="24" class="col-margin">
      <Table size="small" @on-select="selectSingel" @on-select-all="selectAll" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <Page class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
      </Col>
    </Row>
    <Modal v-model="showType" :mask-closable="false" width="800">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">{{ReportYear}}-{{AreaCodeName}}-水果外销统计表</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size=25></Icon>
      </p>
      <table class="reptable">              
              <thead>
                  <tr>
                      <th rowspan="2">水果全年生产总量(吨)</th>
                      <th colspan="2">其中外销量（出县）</th>
                       <th rowspan="2">水果全年生产总产值(元)</th>
                      <th colspan="2">其中外销产值（出县）</th>
                  </tr>
                  <tr>
                      <th>水果外销量（出县）（吨）</th>
                      <th>比上年增减%</th>
                      <th>水果外销产值（出县）（元）</th>
                      <th>比上年增减%</th>
                  </tr>
              </thead>
              <tbody>
              <tr>            
                  <td>
                    {{FormatBigNum(DataModel.ProductNumber)}}                      
                  </td>
                  <td>
                    {{FormatBigNum(DataModel.SaleNumber)}}                      
                  </td>
                  <td>{{DataModel.pecSaleNumber}}</td>
                  <td>
                    {{FormatBigNum(DataModel.ProductMoney)}}                      
                  </td>                                                     
                  <td>
                    {{FormatBigNum(DataModel.SaleMoney)}}                      
                  </td>  
                  <td>{{DataModel.pecSaleMoney}}</td>                
              </tr>
          </tbody>
          </table> 
      <!-- <table class="reptable" style="width:100%">
          <tr>
            <th>项目指标</th>
            <th>数量</th>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">水果全年生产总量（吨）</td>
            <td style="text-align:right;">{{DataModel.ProductNumber}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">其中：外销量（吨）</td>
            <td style="text-align:right;">{{DataModel.SaleNumber}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">水果全年生产总额（万元）</td>
            <td style="text-align:right;">{{DataModel.ProductMoney}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">其中：外销额（万元）</td>
            <td style="text-align:right;">{{DataModel.SaleMoney}}</td>
          </tr>
      </table> -->
      <div slot="footer">
        <div style="text-align:right;padding-top:5px;">
          <Button type="primary" @click="saveSure()">审核通过</Button>
          <Button type="warning" @click="savenUnSure()">退回重报</Button>
          <!--<Button type="ghost" @click="cancel()" style="margin-left: 5px">取消</Button>-->
        </div>
        <Alert style="margin-top:5px;text-align:left" banner type="error">
          填报时间：每年1月10日</br>
          填报说明: 1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。
          <span slot="desc">
          </span>
        </Alert>
      </div>
    </Modal>
    <Modal v-model="showAudit" :mask-closable="false" width="500">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">退回重报原因</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size=25></Icon>
      </p>
      <Input v-model="strMsg" type="textarea" :rows="4" placeholder="请输入不通过原因..."></Input>
      <div slot="footer">
        <Button type="primary" @click="sureUnSure()">确定</Button>
        <Button type="ghost" @click="cancelUnSure()" style="margin-left: 8px">取消</Button>
      </div>
    </Modal>
    <!-- <Modal v-model="ViewShow" :mask-closable="false" width="800">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">外销情况调查表</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size=25></Icon>
      </p>
        <table class="reptable" style="width:100%">
          <tr>
            <th>项目指标</th>
            <th>数量</th>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">水果全年生产总量（吨）</td>
            <td style="text-align:right;">{{DataModel.ProductNumber}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">其中：外销量（吨）</td>
            <td style="text-align:right;">{{DataModel.SaleNumber}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">水果全年生产总额（万元）</td>
            <td style="text-align:right;">{{DataModel.ProductMoney}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">其中：外销额（万元）</td>
            <td style="text-align:right;">{{DataModel.SaleMoney}}</td>
          </tr>
      </table>
      <br/>
      <div slot="footer">
        <Alert style="margin-top:5px;text-align:left" banner type="error">
          填报说明: 1.全省范围内从乡（镇）推广站起，逐级全面统计，由州（市）汇总后上报。
          <span slot="desc">
          </span>
        </Alert>
      </div>
    </Modal> -->
    <Modal v-model="ViewShow" :mask-closable="false" width="800">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">{{ReportYear}}-{{AreaCodeName}}-水果外销统计表</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size=25></Icon>
      </p>
        <table class="reptable">              
              <thead>
                  <tr>
                      <th rowspan="2">水果全年生产总量(吨)</th>
                      <th colspan="2">其中外销量（出县）</th>
                       <th rowspan="2">水果全年生产总产值(元)</th>
                      <th colspan="2">其中外销产值（出县）</th>
                  </tr>
                  <tr>
                      <th>水果外销量（出县）（吨）</th>
                      <th>比上年增减%</th>
                      <th>水果外销产值（出县）（元）</th>
                      <th>比上年增减%</th>
                  </tr>
              </thead>
              <tbody>
              <tr>            
                  <td>
                    {{FormatBigNum(DataModel.ProductNumber)}}                      
                  </td>
                  <td>
                    {{FormatBigNum(DataModel.SaleNumber)}}                      
                  </td>
                  <td>{{DataModel.pecSaleNumber}}</td>
                  <td>
                    {{FormatBigNum(DataModel.ProductMoney)}}                      
                  </td>                                                     
                  <td>
                    {{FormatBigNum(DataModel.SaleMoney)}}                      
                  </td>    
                  <td>{{DataModel.pecSaleMoney}}</td>              
              </tr>
          </tbody>
          </table> 
      <br/>
      <div slot="footer">
        <Alert style="margin-top:5px;text-align:left" banner type="error">
           填报时间：每年1月10日</br>
           填报说明: 1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。
          <span slot="desc">
          </span>
        </Alert>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ReportYear: "",
      AreaCodeName: "",
      ViewShow: false, //查看状态
      Id: "",
      showAudit: false,
      strMsg: "",
      userInfo: this.GetlocaStorage("fruuserinfo"),
      statusList: this.GetGroupDict("ReportStatus"),
      AreaList: [], //所属行政区划数组,
      TableCodeList: this.GetGroupDict("ReportTableName"), //表名称
      CreateYearList: this.GetGroupDict("ReportYear"), //周期
      CycleList: this.GetGroupDict("ReportCycle"), //
      TabTitleList: [], //tab选项卡列表
      selectTabName: "",
      showType: false, //编辑框弹出状态
      ruleValidate: {
        //验证模型
        TableName: [{ required: true, message: "报表名称不能为空", trigger: "blur" }],
        TableCode: [{ required: true, message: "报表代码不能为空", trigger: "blur" }],
        CreateYear: [{ required: true, message: "年度不能为空", trigger: "blur" }],
        Cycle: [{ required: true, message: "时间周期不能为空", trigger: "blur" }],
        CreateTime: [{ required: true, message: "生成时间不能为空", trigger: "blur" }]
      },
      DataModel: {
        //编辑模型
        Id: 0,
        ReportId: "",
        ProductNumber: "",
        SaleNumber: "",
        ProductMoney: "",
        SaleMoney: "",
        pecSaleNumber: "",
        pecSaleMoney: ""
      },
      //查询模型：根据需求删除不不要查询条件
      searchModel: {
        ReportCode: "FruExport",
        FillInYear: "",
        TimesType: "",
        AreaCode: "",
        Status: "",
        PageNumber: 1,
        PageSize: 20
      },
      pageSizeOpts: [20, 40, 50], //默认分页最大设置
      datas: {}, //table数据对象
      dataIds: [],
      ctx: this, //table数据上下文
      columnsList: [
        //表头对象
        { title: "报表名称", key: "ReportName" },
        //{ title: "填报年度", key: "FillInYear", width: 90 },
        { title: "属行政区划", key: "AreaCodeName", width: 220 },
        //{ title: "填报周期", key: "TimesCycle", width: 90 },
        {
          title: "报表状态",
          key: "StatusName",
          width: 100,
          render: (h, params) => {
            switch (params.row.Status * 1) {
              case 0:
                return h(
                  "span",
                  { style: { color: "#ed3f14" } },
                  params.row.StatusName
                );
              case 1:
                return h(
                  "span",
                  { style: { color: "#ff9900" } },
                  params.row.StatusName
                );
              case 2:
                return h(
                  "span",
                  { style: { color: "#993300" } },
                  params.row.StatusName
                );
              case 3:
                return h(
                  "span",
                  { style: { color: "#2d8cf0" } },
                  params.row.StatusName
                );
              case 4:
                return h(
                  "span",
                  { style: { color: "#19be6b" } },
                  params.row.StatusName
                );
              case 5:
                return h(
                  "span",
                  { style: { color: "#80848f" } },
                  params.row.StatusName
                );
              default:
                return h(
                  "span",
                  { style: { color: "#ff9900" } },
                  params.row.StatusName
                );
            }
          }
        },
        { title: "填报时间", key: "StrUpdateTime", width: 160 },
        {
          title: "操作",
          key: "Id",
          width: 250,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  class: {
                    ieditColor: true
                  },
                  props: {
                    size: "small",
                    type: "ghost",
                    icon: "ios-paper-outline"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.ReportYear = params.row.FillInYear;
                      this.AreaCodeName = params.row.AreaCodeName;
                      this.showInfo(params.row.Id, params.row.ReportCode);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  class: {
                    ieditColor: true
                  },
                  props: {
                    size: "small",
                    type: "ghost",
                    icon: "network"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.ReportYear = params.row.FillInYear;
                      this.AreaCodeName = params.row.AreaCodeName;
                      this.editInfo(params.row.Id, params.row.ReportCode);
                    }
                  },
                  attrs: {
                    disabled: params.row.Status == 3 ? false : true
                  }
                },
                "审核"
              ),
              h(
                "Button",
                {
                  class: {
                    ieditColor: true
                  },
                  props: {
                    size: "small",
                    type: "ghost",
                    icon: "ios-undo"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.unReview(params.row.Id, params.row.ReportCode);
                    }
                  },
                  attrs: {
                    disabled: params.row.Status == 4 ? false : true
                  },
                  directives: [
                    {
                      name: "omg-operation",
                      value: { op: "unreview" }
                    }
                  ]
                },
                "取消审核"
              )
            ]);
          }
        }
      ],
      clientHeight: window.innerHeight - 260 //表格默认高度v-omg-operation="{op:'query'}"
    };
  },
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 260;
      })();
    };
  },
  methods: {
    //初始化行政区划树
    SearchAreaList() {
      var areaCode = this.userInfo.AreaCode;
      // console.log(areaCode);
      var areaList = [];
      if (areaCode != "530000000000" && areaCode != null) {
        var item = this.GetlocaStorage("areatreelist")[0];
        for (var i = 0; i < item.children.length; i++) {
          if (item.children[i].value == areaCode) {
            areaList.push(item.children[i]);
          }
        }
      } else {
        areaList = this.GetlocaStorage("areatreelist");
      }
      this.AreaList = areaList[0].children;
    },
    // SearchAreaList() {
    //   var areaCode = this.userInfo.AreaCode;
    //   if (areaCode != '530000000000') {
    //     var item = this.GetlocaStorage("areatreelist")[0];
    //     for (var i = 0; i < item.children.length; i++) {
    //       if (item.children[i].value == areaCode) {
    //         this.AreaList.push(item.children[i]);
    //       }
    //     }
    //   } else {
    //     this.AreaList = this.GetlocaStorage("areatreelist");
    //   }
    // },
    //查询行政区划级联选择
    // SearchCascaderChange(value, selectedData) {
    //   const index = value.length - 1;
    //   this.searchModel.AreaCode = value[index];
    // },
    getTab(name) {
      //console.log(name);
      this.selectTabName = name;
    },
    //查看报表
    // showInfo(id, reportCode) {
    //   var self = this;
    //   this.$http.get("Report", { params: { id: id, reportCode: reportCode } }).then(//获取数据编辑项的值
    //     function (res) {
    //       switch (res.data.list.status) {
    //         case 1:
    //           self.DataModel = res.data.list.model;
    //           self.ViewShow = true;
    //           break;
    //         case 0:
    //           self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
    //           break;
    //         case -1:
    //           self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
    //           break;
    //       }
    //     }
    //   );
    // },
    showInfo: function(id, reportCode) {
      var self = this;
      self.$http
        .get("Report", { params: { id: id, reportCode: reportCode } })
        .then(
          //获取数据编辑项的值
          function(res) {
            switch (res.data.list.status) {
              case 1:
                self.DataModel = res.data.list.model;
                self.Id = id;
                self.ViewShow = true;
                break;
              case 0:
                self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                break;
              case -1:
                self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                break;
            }
          }
        );
    },
    //获取当前页码
    getPageNumber(pageIndex) {
      this.searchModel.PageNumber = pageIndex;
      this.initPageData();
    },
    //获取当前分页大小
    getPageSize(pageSize) {
      this.searchModel.PageSize = pageSize;
      this.initPageData();
    },
    initPageData() {
      var areaCode = this.userInfo.AreaCode;
      this.searchModel.AreaCode = areaCode;
      this.getPageData();
    },
    //获取this.datas: {},//table数据对象
    getPageData() {
      var self = this;
      self.$http
        .post("Report/PostReviewPageList", this.searchModel)
        .then(function(res) {
          if (res.data.status === 1) {
            self.datas = res.data;
          } else {
            self.$Modal.error({ title: "提示信息", content: res.data.message });
          }
        });
    },
    //编辑获取对象传入id
    editInfo: function(id, reportCode) {
      //审核数据加载。。。。
      var self = this;
      self.$http
        .get("Report", { params: { id: id, reportCode: reportCode } })
        .then(
          //获取数据编辑项的值
          function(res) {
            switch (res.data.list.status) {
              case 1:
                self.DataModel = res.data.list.model;
                self.Id = id;
                self.showType = true;
                break;
              case 0:
                self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                break;
              case -1:
                self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                break;
            }
          }
        );
    },
    // editInfo(id, reportCode) {//编辑
    //   var self = this;
    //   this.Id = id;
    //   this.$http.get("Report", { params: { id: id, reportCode: reportCode } }).then(//获取数据编辑项的值
    //     function (res) {
    //       switch (res.data.list.status) {
    //         case 1:
    //           self.DataModel = res.data.list.model;
    //           self.modalShow();
    //           break;
    //         case 0:
    //           self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
    //           break;
    //         case -1:
    //           self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
    //           break;
    //       }
    //     }
    //   );
    // },

    initTab(self, datas) {
      self.TabTitleList = [];
      for (var i = 0; i < datas.length; i++) {
        if (!self.checkTab(datas[i].SortCode, self)) {
          var item = new Object();
          item.SortCode = datas[i].SortCode;
          item.SortName = datas[i].SortName;
          item.list = [];
          for (var j = 0; j < datas.length; j++) {
            if (datas[j].SortCode == datas[i].SortCode) {
              if (!self.checkItem(item.list, datas[j].ItemCode)) {
                item.list.push(datas[j]);
              }
            }
          }
          self.TabTitleList.push(item);
        }
      }
      return self.TabTitleList;
    },
    checkTab(SortCode, self) {
      var res = false;
      for (var i = 0; i < self.TabTitleList.length; i++) {
        if (self.TabTitleList[i].SortCode == SortCode) {
          res = true;
        }
      }
      return res;
    },
    checkItem(datas, ItemCode) {
      var res = false;
      for (var i = 0; i < datas.length; i++) {
        if (datas[i].ItemCode == ItemCode) {
          res = true;
        }
      }
      return res;
    },
    //删除对象
    delInfo(id) {
      var self = this;
      self.$Modal.confirm({
        title: "提示信息",
        content: "<p>数据删除后不可恢复，确定要删除？</p>",
        onOk: () => {
          this.$http
            .delete("GenerateLog", { params: { id: id } })
            .then(function(res) {
              if (res.data.status == 1) {
                self.$Notice.success({ title: "删除成功！", desc: false });
                self.initPageData();
              } else {
                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
              }
            });
        }
      });
    },
    //省级取消审核
    unReview(id, reportCode) {
      var model = new Object();
      model.Id = id;
      model.reportType = "0";
      model.strMsg = "省级已取消审核!";
      this.save(model);
    },
    //审核
    save(model) {
      var self = this;
      this.$http.post("Report/PostUpStatus", model).then(function(res) {
        if (res.data.status == 1) {
          self.$Notice.success({ title: "审核完成!", desc: false });
          self.getPageData();
          self.strMsg = "";
          self.modalHide();
        } else {
          self.$Modal.error({ title: "提示信息", content: "数据审核失败!!!" });
        }
      });
    },
    saveSure() {
      var model = new Object();
      model.Id = this.Id;
      model.reportType = "4";
      model.strMsg = "";
      this.save(model);
      this.modalHide();
    },
    //审核未通过
    savenUnSure() {
      var self = this;
      this.showAudit = true;
    },
    sureUnSure() {
      this.showAudit = false;
      var model = new Object();
      model.Id = this.Id;
      model.reportType = "0";
      model.strMsg = this.strMsg;
      this.save(model);
    },
    cancelUnSure() {
      this.showAudit = false;
      //this.modalHide();
      this.strMsg = "";
    },
    //编辑框打开
    modalShow() {
      this.showType = true;
    },
    //编辑框关闭
    modalHide() {
      this.showType = false;
    },
    //取消方法
    cancel() {
      this.showType = false; //关闭modal
      this.TabTitleList = [];
    },
    //重置model
    restModel(modelname) {
      this.$refs[modelname].resetFields(); //重置model
    },
    //全选方法
    selectAll(selection) {
      this.dataIds = selection;
    },
    //checkbox选中方法
    selectSingel(selection, row) {
      this.dataIds = selection;
    },
    //checkbox取消选中方法
    selecChange(selection) {
      this.dataIds = selection;
    },
    //批量删除
    multiSelect() {
      var self = this;
      if (this.dataIds.length !== 0) {
        self.$Modal.confirm({
          title: "提示信息",
          content: "<p>数据删除后不可恢复，确定要删除？</p>",
          onOk: () => {
            var ids = this.getDataIds(this.dataIds);
            this.$http
              .post("GenerateLog/PostBatchDelete", ids)
              .then(function(res) {
                if (res.data.status == 1) {
                  self.dataIds = [];
                  self.$Notice.success({ title: "删除成功！", desc: false });
                  self.getPageData();
                } else {
                  self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                }
              });
          }
        });
      } else {
        self.$Modal.warning({ title: "提示信息", content: "请选择需要删除的数据!" });
      }
    },
    getDataIds(idList) {
      var ids = [];
      if (idList.length !== 0) {
        for (var i = 0; i < idList.length; i++) {
          ids.push(idList[i].Id);
        }
      }
      return ids;
    },
    currentYear() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth();
      if (month > 1) {
        this.searchModel.FillInYear = year.toString();
      } else {
        this.searchModel.FillInYear = (year - 1).toString();
      }
    }
  },
  //创建Vue页面方法
  created: function() {
    //创业Vue前调用获取this.datas: {},//table数据对象
    this.currentYear();
    this.initPageData();
    this.SearchAreaList();
  },
  watch: {
    //需要监听的在此处新增监听对象
  }
};
</script>

